<template>
	<view class="activityDetails">
        <SRV-topbar title="店铺信息" :isLeft="true"></SRV-topbar>
		<view class="top">
			<image class="top_img" :src="info.coverUrl" mode="aspectFit" ></image>
			<view class="status-box">
				<show-status :name="info.stateName" size="180" fontSize="50" boder="5"
					:color="info.state==2 ? '#cc0000' : (info.state==1 ? '#fbca3f' : (info.state==9 ? '#009900' : '#FF0000')) ">
				</show-status>
			</view>
			<view class="top_info">
				<view class="uni-flex uni-row">
					<view style="-webkit-flex: 1;flex: 1;font-size: 40rpx;font-weight:bold;">{{info.title}}</view>
				</view>
				
			</view>
			<view class="line">
				<view class="left">
					<text>联系人：{{info.name}}</text>
				</view>
			</view>
			<view class="line" >
				<view class="left">
					<text>联系电话：{{info.mobile}}</text>
				</view>
			</view>
			<view class="line">
				<view class="left">
					<text @click="showMap()">地址：{{info.address}}</text>
				</view>
			</view>
			<view class="line">
				<view class="left">
					<text>营业执照：</text>
					<image :src="info.logoThumb" mode="" @tap="previewImage" :data-src="info.logoUrl" style="width: 140rpx;height: 140rpx;"></image>
				</view>
			</view>
			<view class="line">
				<view class="left">
					<text>催租：{{info.rent}}</text>
				</view>
			</view>
            <!-- <view class="line">
            	<view class="left">
            		<text>店铺折算：{{info.merchant_ratio}}</text>
            	</view>
            </view> -->
			<view class="line">
				<view class="left">
					<text @click="callPhone()">业务员：{{info.salesman != '' ? info.salesman + '（'+info.salesmanMobile+'）' : '无'}}</text>
				</view>
			</view>
			<view class="line">
				<view class="left">
					<text>公告：{{info.description ? info.description : "未设置"}}</text>
				</view>
			</view>
			<scroll-view class="scroll" scroll-x="true" show-scrollbar="false">
				<view class="scroll-item" v-for="(item, index) in info.imgList" :key="index">
					<image :src="item.thumb" lazy-load="true"  @tap="previewImage" :data-src="item.imgUrl" data-id="0" mode=""></image>
				</view>
			</scroll-view>
		</view>
        
        <view class="btnList" v-if="info.buttonList.length > 0">
            <view class="item" @click="operateFun(button.type)" v-for="(button,index2) in info.buttonList" :key="index2">
            	<image :src="button.icon" mode=""></image>
            	<text>{{button.name}}</text>
            </view>
        </view>
        
		<uni-popup ref="showPayView" type="bottom">
			<view class="pay_type">
				<image @click="close" class="close" src="https://hdsq.aoorange.cn/attachment/xcx/icon/close1.png" mode="aspectFill"></image>
				<view class="title">选择支付方式</view>
				<view class="paypir">
					<text>催租</text>
					<text>￥{{pay_money}}</text>
				</view>
				<view class="line2"  v-if="pay_money > 0" @click="selPayType(5)">
					<text>余额支付 - 当前余额：{{payInfo.user_money}}</text>
					<view :class="payData.payment_type == 5 ?'sel':'nosel'"  v-if="Number(payInfo.user_money) >= Number(pay_money)"></view>
					<text v-else @click="jump('on_line_recharge')">余额不足</text>
				</view>
				<view class="line2" v-if="pay_money > 0"  @click="selPayType(1)">
					<text>在线微信支付</text>
					<view :class="payData.payment_type == 1 ?'sel':'nosel'"></view>
				</view>
				<view :style="'height:' + bottomHeight + 'rpx;'" class="pay_bot" @click="subPayForm()">确认支付</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	var _self = this;
	import serve from '../static/request.js';
	import storage from '../static/appkey.js';
	import common from '../static/jump.js';
    import commonPay from '../static/commonPay.js';
	export default {
		data() {
			return {
				id: 0,
				info: {
					id : 0,
					title : '',
					money: '',
					picture : '',
					imgList : [],
					start_business: '',
					end_business: '',
					name : '',
					mobile : '',
					address : '',
					longitude: '',
					latitude: '',
					typeName: '',
					cate : '',
					desc: '',
					valid_date : '',
					salesman: '',
					salesmanMobile: '',
					status: '',
					statusName: '',
                    payInfo: [],
					buttonList: [],
				},
				imgList: [],
				payData: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					pay_type: '',
					pay_id: 0,
					is_use_hdq: 0,
					payment_type: 1,
				},
				payInfo: [],
                pay_money: 0,
			}
		},
		methods: {
            callbackFun() {
            	this.close();
            	this.getInfo();
            },
			getInfo() {
				serve.request({
					url: '/member/merchant/detail',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
                        id: this.id,
                        type: 'detail'
					},
                    v: '/v3',
				}).then(res => {
					if(res.code != 200) {
						uni.showToast({
							title: "错误的访问方式",
							icon: 'none',
							success() {
								setTimeout(function () {
									common.jump('return_one')
								}, 2000) 
							}
						});
						return ;
					}
					_self.info = res.data;
					_self.imgList.push(_self.info.logoUrl);
					if(_self.info.imgList.length > 0) {
						_self.info.imgList.forEach((imgItem, imgKey) => {
							_self.imgList.push(imgItem.imgUrl);
						});
					}
				});
			},
			showMap() {
				uni.openLocation({
				    latitude: Number(_self.info.latitude),
				    longitude: Number(_self.info.longitude),
				    success: function (res) {
				        console.log(res);
				    }
				});
			},
			callPhone() {
				if(_self.info.salesmanMobile == '') {
					return ;
				}
				uni.makePhoneCall({
				    phoneNumber: _self.info.salesmanMobile 
				});
			},
			previewImage: function(e) {
				var current = e.target.dataset.src
				uni.previewImage({
					current: current,
					urls: _self.imgList
				})
			},
			operateFun(type) {
				if(type == 'pay') {
					_self.wechatPay();
				} else if (type == 'userList') {
					uni.navigateTo({
					    url: '/merchant/userList?id='+_self.info.id
					});
				} else if (type == 'edit') {
					uni.navigateTo({
					    url: '/merchant/edit?id='+_self.info.id
					});
                } else if (type == 'turnoverList') {
                	uni.navigateTo({
                	    url: '/merchant/turnover?id='+_self.info.id+'&title='+_self.info.title
                	});
                } else if (type == 'bill') {
                	uni.navigateTo({
                	    url: '/merchant/bill?id='+_self.info.id
                	});
				} else {
					uni.showToast({
						title: "错误的按钮方式",
						icon: 'none'
					});
				}
			},
			wechatPay(){
				_self.payInfo = _self.info.payInfo;
				_self.payData.pay_type = _self.payInfo.pay_type;
				_self.payData.pay_id = _self.info.id;
				_self.calculationTotalMoney();
				_self.$refs.showPayView.open();
			},
			setUseOther(type) {
				if(type == 1) {
					_self.payData.is_use_hdq = _self.payData.is_use_hdq == 1 ? 0 : 1;
				} 
				_self.calculationTotalMoney();
			},
			selPayType(payType) {
				if(payType == 5 && Number(_self.payInfo.user_money) < Number(_self.pay_money)) {
					return ;
				}
				_self.payData.payment_type = payType;
			},
			subPayForm() {
				commonPay.payFun(_self.payData, _self, 2);
			},
			calculationTotalMoney(){
				_self.pay_money = JSON.parse(JSON.stringify(_self.payInfo.pay_money));
				if(_self.payInfo.use_hdq > 0) {
					if(_self.payData.is_use_hdq) {
						_self.pay_money = Number(_self.pay_money) - Number(_self.payInfo.use_hdq);
					}
				}
				_self.$forceUpdate();
			},
			close() {
				_self.$refs.showPayView.close();
			},
			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link)
			}
		},
		onLoad(options) {
			_self = this;
			_self.id = options.id || 0;
			_self.getInfo();
		},
		onShow() {
			uni.hideHomeButton();
		},
		onPullDownRefresh() {
			_self.getInfo();
		},
	}
</script>

<style scoped lang="scss">
	.activityDetails {
		padding-bottom: 100upx;
		.top {
			position: relative;
			border-bottom: 16upx rgba(251, 251, 253, 0.8) solid;
			.status-box{
				position: absolute;
				right: 20rpx;
				top: 342rpx;
			}
			.top_img {
				width: 100%;
				height: 420upx;

			}

			.top_info {
				margin: 0upx 30upx;
				padding: 35upx 0upx;
				border-bottom: 1upx rgba(57, 72, 107, 0.1) solid;
				position: relative;

				.title {
					font-size: 36upx;
					font-weight: bold;
					color: rgba(60, 72, 104, 1);
				}

				.read {
					display: flex;
					align-items: center;
					font-size: 24upx;
					padding: 23upx 0upx 34upx;

					image {
						width: 36upx;
						margin-right: 10upx;
					}
				}

				.pic {
					font-size: 24upx;
					color: rgba(255, 182, 52, 1);
				}

				.top_bot {
					position: absolute;
					right: 0;
					width: 151upx;
					height: 60upx;
					background: rgba(255, 182, 52, 1);
					font-size: 24upx;
					text-align: center;
					line-height: 60upx;
					color: #FFFFFF;
					bottom: 54upx;
				}
				.top_bot2 {
					position: absolute;
					right: 0;
					width: 151upx;
					height: 60upx;
					background: rgba(255, 182, 52, 1);
					font-size: 24upx;
					text-align: center;
					line-height: 60upx;
					bottom: 54upx;
					background: #ececec;
					color: #666666;	
				}
			}

			.line:last-child {
				border: none;
			}

			.line {
				margin: 0upx 30upx;
				padding: 26upx 0upx;
				border-bottom: 1upx rgba(57, 72, 107, 0.1) solid;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					display: flex;
					align-items: center;
					font-size: 28upx;
					color: #000;

					image {
						width: 20upx;
						height: 20upx;
						margin-right: 8upx;
					}
				}

				.right {
					image {
						width: 32upx;
						height: 32upx;
					}
				}
			}
			
			.scroll {
				padding-top: 60upx;
				width: 95%;
				padding: 60upx 16upx 45upx;
				white-space: nowrap;
					
				.scroll-item:first-child {
					margin-left: 0upx;
				}
					
				.scroll-item {
					display: inline-flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-left: 20upx;
					font-size: 20upx;
					
					image {
						width: 140upx;
						height: 140upx;
						border-radius: 20upx;
					}
					
					text {
						padding-top: 26upx;
					}
				}
			}

		}
		.bot {
			position: fixed;
			width: 100%;
			height: 110rpx;
			bottom: 0rpx;
			border-top: 1rpx #EBECF0 solid;
			display: flex;
			font-size: 28upx;
			.txt1 {
				box-shadow: 0px 1rpx 0px 0px #ebecf0;
				width: 100%;
				height: 100%;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				background:#b0b2b5;
				color: #FFFFFF;
			}

			view:last-child {
				background: rgba(255, 200, 10, 1);
				color: #FFFFFF;
			}
			
		}
        .btnList {
        	display: flex;
            width: 100%;
            align-items: center;
            // margin: 30rpx 10rpx;
            flex-wrap: wrap;
            flex-direction: row;
            .item {
                width: 24%;
                color: #23345B;
                font-size: 24rpx;
                padding: 10rpx 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                    
                image {
                	width: 100rpx;
                	height: 100rpx;
                	// margin-bottom: 20rpx;
                }
            }
        }
		.uni-row {
		    -webkit-box-orient: horizontal;
		    -webkit-box-direction: normal;
		    -webkit-flex-direction: row;
		    flex-direction: row;
		}
		.uni-flex {
		    display: -webkit-box;
		    display: -webkit-flex;
		    display: flex;
		    -webkit-box-orient: horizontal;
		    -webkit-box-direction: normal;
		    -webkit-flex-direction: row;
		    flex-direction: row;
		}
        .sign{
			display: flex;
			justify-content: center;
			align-items: center;
			background: #FFC600;
			position: fixed;
			bottom: 0upx;
			width: 100%;
			left: 0;
			height: 100upx;
			font-weight: bold;
			font-size: 32upx;
			color: #FFFFFF;
			z-index: 9999;
		}
		
		.pay_type{
			position: relative;
			width: 100%;
			background: #FFFFFF;
			padding-bottom: 140upx;
			.close{
				position: absolute;
				width:23upx;
				height:23upx;
				right: 40upx;
				top: 45upx;
			}
			.title{
				width: 100%;
				text-align: center;
				height: 100upx;
				line-height: 100upx;
				font-size: 36upx;
				border-bottom: 1upx rgba(251, 251, 253, 1) solid;
			}
			.paypir{
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				padding: 50upx 0upx 20upx;
				font-size: 28upx;
				text:last-child{
					color: #FF5F60;
					font-size: 40upx;
					font-weight: bold;
					margin-top: 10upx;
				}
			}
			.line2{
				width: 100%;
				box-sizing: border-box;
				padding: 36upx;
				display: flex;
				justify-content: space-between;
				font-size: 28upx;
				color: #333333;
				border-bottom: 1upx rgba(251, 251, 253, 1) solid;
				.txt{
					color: #999999;
				}
				
				.nosel {
					width: 36upx;
					height: 36upx;
					border: 1upx solid rgba(60, 72, 104, 1);
					border-radius: 50%;
				}
				.sel {
					background-image: url(../static/img/check.png);
					background-repeat: no-repeat;
					width: 40upx;
					height: 40upx;
					background-size: 100%;
				}
				.nocheck {
					width: 36upx;
					height: 36upx;
					border: 1upx solid rgba(60, 72, 104, 1);
					border-radius: 20%;
				}
				.check {
					background: url(../static/img/checkbox_check.png);
					background-repeat: no-repeat;
					width: 40upx;
					height: 40upx;
					background-size: 100%;
				}
			}
			.pay_bot {
			  width: 100%;
			  position: fixed;
			  left: 0;
			  bottom: 0;
			  height: 100upx;
			  background: #FFBF0A;
			  color: #fff;
			  font-size: 32upx;
			  line-height: 100upx;
			  text-align: center;
			  border-radius: 0;
			  &::after{
				  border: none;
			  }
			}
		}
	}
</style>
